<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="box">
			<!-- 静态传值，就是传递一个固定的值，不需要使用 v-bind -->
			<hello-world age="18"></hello-world>

			<!-- 动态传值 -->
			<!-- 如果想把父组件 data 中的数据传递给子组件，需要使用 v-bind 方式进行传参 -->
			<hello-world :age="age"></hello-world>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 声明子组件
			Vue.component('hello-world', {
				// 子组件想接收父组件传递的数据，需要使用 props 属性
				props: ['age'],
				data: function () {
					return {
						name: 'Tom'
					}
				},
				// 接收的数据，和data中的数据一样使用
				template: `
          <div>
				    <p>{{ name }}</p>
				    <p>{{ age }}</p>
			    </div>
        `
			})

			// Vue 实例本身就是一个组件（父组件）
			var vm = new Vue({
				el: '.box',
				data: {
					age: 3
				}
			})
		</script>
	</body>
</html>
